import UserAPI from '@/api/user'
import type { ISelectConfig } from '@/components/TableSelect/index.vue'

const selectConfig: ISelectConfig = {
    pk: 'id',
    width: '70%',
    placeholder: '请选择用户',
    formItems: [
        {
            type: 'input',
            label: '关键字',
            prop: 'keywords',
            attrs: {
                placeholder: '用户名/昵称/手机号',
                clearable: true,
                style: {
                    width: '200px'
                }
            }
        },
        {
            type: 'tree-select',
            label: '部门',
            prop: 'deptId',
            attrs: {
                placeholder: '请选择',
                data: [
                    {
                        value: 1,
                        label: '有来技术',
                        children: [
                            {
                                value: 2,
                                label: '研发部门'
                            },
                            {
                                value: 3,
                                label: '测试部门'
                            }
                        ]
                    }
                ],
                filterable: true,
                'check-strictly': true,
                'render-after-expand': false,
                clearable: true,
                style: {
                    width: '150px'
                }
            }
        },
        {
            type: 'select',
            label: '状态',
            prop: 'status',
            attrs: {
                placeholder: '全部',
                clearable: true,
                style: {
                    width: '100px'
                }
            },
            options: [
                { label: '启用', value: 1 },
                { label: '禁用', value: 0 }
            ]
        },
        {
            type: 'date-picker',
            label: '创建时间',
            prop: 'createdAt',
            attrs: {
                type: 'daterange',
                'range-separator': '~',
                'start-placeholder': '开始时间',
                'end-placeholder': '截止时间',
                'value-format': 'YYYY-MM-DD',
                style: {
                    width: '240px'
                }
            }
        }
    ],
    indexAction: function (params) {
        if ('createdAt' in params) {
            const createdAt = params.createdAt as string[]
            if (createdAt?.length > 1) {
                params.startTime = createdAt[0]
                params.endTime = createdAt[1]
            }
            delete params.createdAt
        }
        return UserAPI.getPage(params)
    },
    tableColumns: [
        { type: 'selection', width: 50, align: 'center' },
        { label: '编号', align: 'center', prop: 'id', width: 100 },
        { label: '用户名', align: 'center', prop: 'username' },
        { label: '用户昵称', align: 'center', prop: 'nickname', width: 120 },
        { label: '性别', align: 'center', prop: 'genderLabel', width: 100 },
        { label: '部门', align: 'center', prop: 'deptName', width: 120 },
        { label: '手机号码', align: 'center', prop: 'mobile', width: 120 },
        {
            label: '状态',
            align: 'center',
            prop: 'status',
            templet: 'custom',
            slotName: 'status'
        },
        { label: '创建时间', align: 'center', prop: 'createdAt', width: 180 }
    ]
}

export default selectConfig
